<template>
	<view class="waitForTeacher">
		<video :src="liveUrl" autoplay style="opacity: 0;width: 1rpx;height: 1rpx;"></video>

		<canvas
			:style="{top: `${systemInfo.statusBarHeight}px`, height: `calc(100vh - ${systemInfo.statusBarHeight}px)`}"
			ref="myCanvas" class="handWriting" :disable-scroll="true" canvas-id="handWriting">
		</canvas>
	</view>
</template>

<script>
	export default {
		name: 'waitForTeacher',
		data() {
			return {
				liveUrl: null,
				systemInfo: {},
				ctx: null
			};
		},
		onLoad(parmas) {
			this.liveUrl = `rtmp://${parmas.ip}:1935/live/test1`
			console.log(this.liveUrl)
			// setTimeout(() => {this.$refs.playvideo.play()}, 800)
			
			uni.getSystemInfo({
				success: res => this.systemInfo = res
			})

			// let _this = this
			// // _this.playing = true
			// const innerAudioContext = uni.createInnerAudioContext();
			// innerAudioContext.autoplay = true;
			// innerAudioContext.src = this.liveUrl;
			// innerAudioContext.onError((res) => {
			// 	//如果音频没有正常播放
			// 	console.log(res.errCode);
			// })
			// innerAudioContext.onStop((res) => {
			// 	_this.playing = false

			// 	_this.$forceUpdate()
			// })

		},
		onReady() {
			let ctx = uni.createCanvasContext('handWriting', this);
			this.ctx = ctx;

			this.ctx.drawImage(this.urlImg, 0, 0, )

			this.canverStream()

		},
		methods: {
			async canverStream() {
				/*
				ws://talk.cocophp.com:8000/
				ws://47.104.203.80:3030/socket.io/
				*/
				const {
					ctx
				} = this
				this.taskScoket = uni.connectSocket({
					url: 'ws://47.104.203.80:3030',
					complete: msg => console.log(msg,
						'connectSocketconnectSocketconnectSocketconnectSocketconnectSocketconnectSocket')
				})
				console.log(this.taskScoket)
				this.taskScoket.onMessage((e) => {
					console.log(e.data)
					if (JSON.parse(e.data).type == 'clear') {
						ctx.clearRect(0, 0, 99999, 99999)
						return
					}

					this.pointLine(JSON.parse(e.data))

				})
			},
			pointLine(lineNow, x, y, type) {
				const {
					ctx
				} = this

				// 笔迹起点
				ctx.beginPath()
				// moveto 将坐标移到xy轴
				ctx.moveTo(lineNow[0].lineX, lineNow[0].lineY);
				ctx.setLineWidth(lineNow[0].lineSize)
				ctx.setFillStyle(lineNow[0].color);

				let isRubber = false
				if (lineNow[0].action == 'rubber') {
					isRubber = true
				}

				if (lineNow[0].action == 'ygpen') {
					// ctx.setStrokeStyle('rgba(255, 255, 255, 1)')
					// ctx.setShadow(5, 5, 20, lineNow[0].color)
					// ctx.setGlobalAlpha(0.1)
					
					ctx.setGlobalAlpha(0.005)
					ctx.setStrokeStyle(lineNow[0].color)
					ctx.setShadow(0, 0, 0, lineNow[0].color)
					
				} else {
					ctx.setStrokeStyle(lineNow[0].color)
					ctx.setShadow(0, 0, 0, lineNow[0].color)
					ctx.setGlobalAlpha(1)
				}

				// 循环坐标
				lineNow.forEach((im, ix) => {
					if (isRubber) {
						ctx.clearRect(im.lineX, im.lineY, 20, 20)
						return
					}
					this.ctx.lineTo(im.lineX, im.lineY)
					this.ctx.stroke()
				})
				this.ctx.draw(true)

				this.$forceUpdate()
			}

		}
	};
</script>

<style lang="scss">
	input,
	button {
		width: 90%;
		height: 100rpx;
		border: 1rpx solid #CCCCCC;
		margin: auto;
		margin-top: 30rpx;
		border-radius: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	button {
		border: none;
	}
</style>
